
import React, { useState, useTransition, FC } from 'react';

import './use_transition.css'
export const TransitionComponent: FC = () => {
    const [activeTab,setActiveTab] = useState('');


    const [,startTransition] = useTransition();

    const onHandleChange = (tab: string) => {
        // 把某次更新标记为低优先级；从而防止页面卡顿的情况，不阻塞ui对用户的相应；
        startTransition(()=>{
            setActiveTab(tab);
        })
    }


    return <>
        <BtnFun isActive={activeTab=='home'} onClick={()=>{
            console.log("嗲及")
            onHandleChange('home')
        }}>首页</BtnFun>
        <BtnFun isActive={activeTab=='movie'} onClick={()=>{
            onHandleChange('movie')
        }}>电影</BtnFun>
        <BtnFun isActive={activeTab=='my'} onClick={()=>{
            onHandleChange('my')
        }}>我的</BtnFun>

        <div>
            {activeTab=='home'?<HomeFun></HomeFun>:null}
            {activeTab=='movie'?<MovieFun></MovieFun>:null}
            {activeTab=='my'?<MyFun></MyFun>:null}
        </div>

    </>
}

// 一个 按钮组件
type TabType = React.PropsWithChildren & { isActive: boolean,onClick: ()=>void};
export const BtnFun: FC<TabType> = (props) => {
    const onButtonClick = () => {
        props.onClick();
    }

    return <>
        <button onClick={onButtonClick}  className={props.isActive?'li_wrap activeItem':'li_wrap'}>{props.children}</button>
    </>
}


export const HomeFun: FC = () => {
    return <>
        首页
    </>
}

export const MovieFun: FC = () => {
    return <>
        电影
        {Array(99999).fill("刘凯欣").map((item,index)=>{
            return (
                <li key={index}>{item}{index+1}</li>
            )
        })}
    </>
}

export const MyFun: FC = () => {
    return <>
        我的
    </>
}